<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5 Workshop - Tools</title>
  <link rel="stylesheet" href="js/jquery.mobile-1.0rc2.min.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" media="only screen and (min-width: 1200px) " href="css/postal/web_postal.css"/>
  <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/postal/iphone_postal.css"/>
  <link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/postal/ipad_postal.css"/> 
  <link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/postal/ipad_postal_h.css"/>
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="js/UI.js"></script>
  <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
	<script>
	addMetaFile();
</script>
</head>

<body>
  <header id="top">
      <div id="logo">Logo</div>
      <div id="top_button">
        <span class="toggle_button right_games_button" id="left_tools_button" style="margin-left:0">Tolls</span>
        <span class="toggle_button left_tools_button" id="right_games_button" style="background-image:url(image/games_content/topbuttom_bg_click.png); color:#2f71cb; text-shadow: 0 1px 1px #fff; margin-left:8px">Games</span>
      </div>
      <div id="share">
        <div class="language_cutover" id="choice_language"></div>
         <div id="language_box">
	        <ul id="language_list">
	          <li id="English">English</li>
	          <li id="Chinese">Chinese</li>
	        </ul>
	    </div>
        <div class="share_link"><a class="addthis_counter addthis_pill_style"></a>
				<script type="text/javascript" src=" http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ecf3b152c7576ee"></script></div>
        <div class="website_wb"></div>
      </div>
  </header>
  
  <div id="postal_container">
    <div data-role="page" id="postal_area">
      <div data-role="content" id="content1">
        <h1 id="postal_search">Postal Search</h1>
        <!--postal_switching start-->        
        <div id="postal_switching">
          <ul id="postal_city">
             <li class="poatal">Postal</li>
             <li class="switching_arrow"><img src="image/tools_postal/pic_to.png"/></li>
             <li class="city">City</li>
          </ul>
          <div id="switching_button"><img src="image/tools_postal/postal_button_swiching.png"/></div>
        </div>
        <!--postal_switching end-->
        <!--seach_box start-->
          <input type="text" id="search_input" value="Albuquerque"/>
        <!--seach_box end-->
        <!--place_box satrt-->
        <div id="place_box"> 
        <table cellpadding="0" cellspacing="0" id="place_list">
          <tbody>
            <tr>
              <td class="place">Place</td>
              <td class="state">State</td>
              <td class="country">Country</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="place">Albuquerque</td>
              <td class="state">Kansas</td>
              <td class="country">USA</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="place">Albuquerque</td>
              <td class="state">New Mexico</td>
              <td class="country">USA</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="place">Albuquerque</td>
              <td class="state">Miss Ouri</td>
              <td class="country">USA</td>
            </tr>
          </tbody>
        </table>
        </div>
        <!--place_box end-->
        <a href="#" id="seach_button">Search</a>
        <h1 id="result_box">The Result</h1>
        <div class="result_description">
          <p class="result_title">The City:</p>
          <p class="result_text">Albuquerque,New Mexico,USA</p>
        </div>
         <div class="result_description">
          <p class="result_title">Tel Code:</p>
          <p class="result_text">(505)</p>
        </div>
      </div>
		</div>
  </div>
  <footer id="footer">
  </footer>

<script >
$(function(){
    $("#right_games_button").bind('click',function(){
        window.location.href="games.html"; 
    })
});

</script>
</body>
</html>
